<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>日常任务管理系统</title>
        <style>
            :root {
                --primary-color: #1565c0;
                --primary-light: #e3f2fd;
                --primary-dark: #0d47a1;
                --accent-color: #2196f3;
                --text-color: #333;
                --light-text: #fff;
                --background-color: #f5f7fa;
                --card-color: #fff;
                --border-color: #e0e0e0;
                --success-color: #4caf50;
                --warning-color: #ff9800;
                --danger-color: #f44336;
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            }

            body {
                background-color: var(--background-color);
                color: var(--text-color);
                line-height: 1.6;
                padding-bottom: 60px; /* 为底部标签栏腾出空间 */
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 15px;
            }

            header {
                background-color: var(--primary-color);
                color: var(--light-text);
                padding: 15px 0;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1000;
            }

            header h1 {
                font-size: 1.5rem;
                text-align: center;
            }

            main {
                margin-top: 60px;
                padding: 20px 0;
                min-height: calc(100vh - 120px);
            }

            .tab-container {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 120px);
            }

            .tabs {
                display: flex;
                background-color: var(--primary-color);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                overflow: hidden;
                position: fixed;
                bottom: 0;
                width: 100%;
                z-index: 1000;
            }

            .tab {
                flex: 1;
                text-align: center;
                padding: 12px 5px;
                color: var(--light-text);
                cursor: pointer;
                transition: background-color 0.3s;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 0.85rem;
            }

            .tab i {
                font-size: 1.2rem;
                margin-bottom: 4px;
            }

            .tab.active {
                background-color: var(--primary-dark);
            }

            .tab-content {
                display: none;
                flex: 1;
                background-color: var(--card-color);
                border-radius: 8px;
                padding: 20px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                overflow-y: auto;
                margin-bottom: 15px;
            }

            .tab-content.active {
                display: block;
            }

            .task-list {
                list-style-type: none;
            }

            .task-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px;
                margin-bottom: 10px;
                background-color: var(--card-color);
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                transition: transform 0.3s;
                cursor: pointer;
            }

            .task-item:hover {
                transform: translateY(-3px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }

            .task-title {
                font-weight: 500;
                flex: 1;
            }

            .task-status {
                display: inline-block;
                padding: 5px 10px;
                border-radius: 20px;
                font-size: 0.8rem;
                margin-right: 10px;
            }

            .status-completed {
                background-color: var(--success-color);
                color: white;
            }

            .status-in-progress {
                background-color: var(--warning-color);
                color: white;
            }

            .status-pending {
                background-color: var(--danger-color);
                color: white;
            }

            .task-rating {
                display: flex;
                align-items: center;
            }

            .star {
                color: #ffd700;
                margin-right: 2px;
            }

            .btn {
                display: inline-block;
                padding: 10px 20px;
                background-color: var(--primary-color);
                color: var(--light-text);
                border: none;
                border-radius: 4px;
                cursor: pointer;
                margin-right: 10px;
                transition: background-color 0.3s;
            }

            .btn:hover {
                background-color: var(--primary-dark);
            }

            .btn-danger {
                background-color: var(--danger-color);
            }

            .btn-danger:hover {
                background-color: #d32f2f;
            }

            .modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 2000;
            }

            .modal-content {
                background-color: var(--card-color);
                margin: 10% auto;
                padding: 20px;
                border-radius: 8px;
                width: 90%;
                max-width: 600px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            }

            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
                cursor: pointer;
            }

            .close:hover {
                color: var(--text-color);
            }

            .form-group {
                margin-bottom: 15px;
            }

            .form-group label {
                display: block;
                margin-bottom: 5px;
                font-weight: 500;
                color: var(--primary-dark);
            }

            .form-control {
                width: 100%;
                padding: 10px;
                border: 1px solid var(--border-color);
                border-radius: 4px;
            }

            textarea.form-control {
                height: 100px;
            }

            .chart-container {
                margin-top: 20px;
                padding: 15px;
                background-color: var(--card-color);
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            }

            .chart {
                height: 300px;
                background-color: var(--background-color);
                margin-top: 15px;
                border-radius: 4px;
                position: relative;
            }

            .bar {
                position: absolute;
                bottom: 0;
                width: 30px;
                background-color: var(--primary-color);
                border-radius: 4px 4px 0 0;
                transition: height 0.3s;
            }

            .time-filter {
                display: flex;
                margin-bottom: 15px;
            }

            .time-btn {
                flex: 1;
                padding: 8px;
                background-color: var(--primary-light);
                border: none;
                margin-right: 5px;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

            .time-btn:last-child {
                margin-right: 0;
            }

            .time-btn.active {
                background-color: var(--primary-color);
                color: var(--light-text);
            }

            .profile-section {
                text-align: center;
                padding: 20px 0;
            }

            .profile-img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                object-fit: cover;
                margin-bottom: 10px;
                border: 3px solid var(--primary-color);
            }

            .profile-name {
                font-size: 1.5rem;
                margin-bottom: 5px;
            }

            .profile-menu {
                margin-top: 30px;
            }

            .menu-item {
                display: block;
                padding: 15px;
                margin-bottom: 10px;
                background-color: var(--card-color);
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                text-decoration: none;
                color: var(--text-color);
                text-align: left;
                position: relative;
            }

            .menu-item::after {
                content: "›";
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 1.5rem;
                color: var(--primary-color);
            }

            .float-btn {
                position: fixed;
                bottom: 80px;
                right: 20px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: var(--primary-color);
                color: var(--light-text);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                cursor: pointer;
                z-index: 900;
            }

            .detail-header {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
            }

            .back-btn {
                margin-right: 10px;
                cursor: pointer;
                font-size: 20px;
            }

            .task-detail-section {
                margin-bottom: 20px;
            }

            .detail-label {
                font-weight: 500;
                margin-bottom: 5px;
                color: var(--primary-dark);
            }

            .detail-value {
                padding: 10px;
                background-color: var(--background-color);
                border-radius: 4px;
                margin-bottom: 10px;
            }

            @media (max-width: 768px) {
                header h1 {
                    font-size: 1.2rem;
                }

                .time-filter {
                    flex-direction: column;
                }

                .time-btn {
                    margin-right: 0;
                    margin-bottom: 5px;
                }

                .modal-content {
                    margin: 20% auto;
                    width: 95%;
                }
            }

            /* 图标样式 */
            .icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            .icon-task {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
            }

            .icon-chart {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E");
            }

            .icon-profile {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
            }
        </style>
    </head>
    <body>
        <header>
            <div class="container">
                <h1>日常任务管理系统</h1>
            </div>
        </header>

        <main>
            <div class="container">
                <div class="tab-container">
                    <div class="tab-content active" id="today">
                        <h2>今日任务列表</h2>
                        <ul class="task-list" id="today-task-list">
                            <li class="task-item" data-id="1">
                                <div class="task-title">读书一小时</div>
                                <div>
                                    <span class="task-status status-completed"
                                        >已完成</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                            <li class="task-item" data-id="2">
                                <div class="task-title">锻炼半小时</div>
                                <div>
                                    <span class="task-status status-in-progress"
                                        >进行中</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                            <li class="task-item" data-id="3">
                                <div class="task-title">学习编程</div>
                                <div>
                                    <span class="task-status status-pending"
                                        >待完成</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content" id="task-detail">
                        <div class="detail-header">
                            <div class="back-btn">←</div>
                            <h2 id="detail-title">任务详情</h2>
                        </div>

                        <div class="task-detail-section">
                            <div class="detail-label">任务标题</div>
                            <div class="detail-value" id="detail-name">
                                读书一小时
                            </div>
                        </div>

                        <div class="task-detail-section">
                            <div class="detail-label">任务详情</div>
                            <div class="detail-value" id="detail-desc">
                                阅读《高效能人士的七个习惯》，专注阅读一小时，做好读书笔记
                            </div>
                        </div>

                        <div class="task-detail-section">
                            <div class="detail-label">开始时间</div>
                            <div class="detail-value" id="detail-start-time">
                                2025-04-03 08:00
                            </div>
                        </div>

                        <div class="task-detail-section">
                            <div class="detail-label">完成时间</div>
                            <div class="detail-value" id="detail-end-time">
                                2025-04-03 09:10
                            </div>
                        </div>

                        <div class="task-detail-section">
                            <div class="detail-label">任务评分</div>
                            <div class="detail-value" id="detail-rating">
                                <span class="task-rating">
                                    <span class="star">★</span>
                                    <span class="star">★</span>
                                    <span class="star">★</span>
                                    <span class="star">★</span>
                                    <span class="star">☆</span>
                                </span>
                            </div>
                        </div>

                        <div class="task-detail-section">
                            <div class="detail-label">完成情况描述</div>
                            <div class="detail-value" id="detail-completion">
                                完成了计划的阅读内容，理解了第一章和第二章的核心概念。遇到的问题是有些概念比较抽象，需要反复阅读。感想是这本书的理念非常实用，可以应用到日常生活中提高效率。
                            </div>
                        </div>
                    </div>

                    <div class="tab-content" id="databoard">
                        <h2>任务统计</h2>
                        <div class="time-filter">
                            <button class="time-btn active" data-time="today">
                                今日
                            </button>
                            <button class="time-btn" data-time="week">
                                近7天
                            </button>
                            <button class="time-btn" data-time="month">
                                近1个月
                            </button>
                        </div>

                        <div class="chart-container">
                            <h3>任务完成数量</h3>
                            <div class="chart" id="task-count-chart">
                                <div
                                    class="bar"
                                    style="height: 70%; left: 20px"
                                    title="已完成: 3"
                                ></div>
                                <div
                                    class="bar"
                                    style="
                                        height: 40%;
                                        left: 60px;
                                        background-color: var(--warning-color);
                                    "
                                    title="进行中: 2"
                                ></div>
                                <div
                                    class="bar"
                                    style="
                                        height: 20%;
                                        left: 100px;
                                        background-color: var(--danger-color);
                                    "
                                    title="待完成: 1"
                                ></div>
                            </div>
                        </div>

                        <div class="chart-container">
                            <h3>任务评分统计</h3>
                            <div class="chart" id="task-rating-chart">
                                <div
                                    class="bar"
                                    style="height: 20%; left: 20px"
                                    title="1星: 0"
                                ></div>
                                <div
                                    class="bar"
                                    style="height: 40%; left: 60px"
                                    title="2星: 0"
                                ></div>
                                <div
                                    class="bar"
                                    style="height: 60%; left: 100px"
                                    title="3星: 1"
                                ></div>
                                <div
                                    class="bar"
                                    style="height: 80%; left: 140px"
                                    title="4星: 1"
                                ></div>
                                <div
                                    class="bar"
                                    style="height: 40%; left: 180px"
                                    title="5星: 1"
                                ></div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-content" id="profile">
                        <div class="profile-section">
                            <img
                                src="/api/placeholder/100/100"
                                alt="User Profile"
                                class="profile-img"
                            />
                            <h2 class="profile-name">张三</h2>
                            <p>任务管理达人</p>
                        </div>

                        <div class="profile-menu">
                            <a href="#" class="menu-item" id="view-tasks"
                                >查看任务列表</a
                            >
                            <a href="#" class="menu-item">个人设置</a>
                            <a href="#" class="menu-item">帮助与反馈</a>
                        </div>
                    </div>

                    <div class="tab-content" id="task-list">
                        <div class="detail-header">
                            <div class="back-btn">←</div>
                            <h2>所有任务</h2>
                        </div>

                        <ul class="task-list">
                            <li class="task-item">
                                <div>
                                    <div class="task-title">读书一小时</div>
                                    <small>2025-04-03</small>
                                </div>
                                <div>
                                    <span class="task-status status-completed"
                                        >已完成</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                            <li class="task-item">
                                <div>
                                    <div class="task-title">锻炼半小时</div>
                                    <small>2025-04-03</small>
                                </div>
                                <div>
                                    <span class="task-status status-in-progress"
                                        >进行中</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                            <li class="task-item">
                                <div>
                                    <div class="task-title">学习编程</div>
                                    <small>2025-04-03</small>
                                </div>
                                <div>
                                    <span class="task-status status-pending"
                                        >待完成</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                            <li class="task-item">
                                <div>
                                    <div class="task-title">写日记</div>
                                    <small>2025-04-02</small>
                                </div>
                                <div>
                                    <span class="task-status status-completed"
                                        >已完成</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                    </span>
                                </div>
                            </li>
                            <li class="task-item">
                                <div>
                                    <div class="task-title">背诵单词</div>
                                    <small>2025-04-02</small>
                                </div>
                                <div>
                                    <span class="task-status status-completed"
                                        >已完成</span
                                    >
                                    <span class="task-rating">
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">★</span>
                                        <span class="star">☆</span>
                                        <span class="star">☆</span>
                                    </span>
                                </div>
                            </li>
                        </ul>

                        <div style="text-align: center; margin-top: 20px">
                            <button class="btn btn-danger">删除所选任务</button>
                        </div>
                    </div>
                </div>

                <div class="float-btn" id="add-task-btn">+</div>
            </div>
        </main>

        <!-- 底部导航标签 -->
        <div class="tabs">
            <div class="tab active" data-tab="today">
                <span class="icon icon-task"></span>
                <span>今日任务</span>
            </div>
            <div class="tab" data-tab="databoard">
                <span class="icon icon-chart"></span>
                <span>Databoard</span>
            </div>
            <div class="tab" data-tab="profile">
                <span class="icon icon-profile"></span>
                <span>我的</span>
            </div>
        </div>

        <div class="modal" id="add-task-modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>添加新任务</h2>
                <form id="add-task-form">
                    <div class="form-group">
                        <label for="task-name">任务名称</label>
                        <input
                            type="text"
                            id="task-name"
                            class="form-control"
                            required
                        />
                    </div>
                    <div class="form-group">
                        <label for="task-desc">任务内容</label>
                        <textarea
                            id="task-desc"
                            class="form-control"
                            required
                        ></textarea>
                    </div>
                    <div class="form-group">
                        <label for="task-start-time">开始时间</label>
                        <input
                            type="datetime-local"
                            id="task-start-time"
                            class="form-control"
                            required
                        />
                    </div>
                    <div class="form-group">
                        <label for="task-end-time">结束时间</label>
                        <input
                            type="datetime-local"
                            id="task-end-time"
                            class="form-control"
                            required
                        />
                    </div>
                    <button type="submit" class="btn">添加任务</button>
                </form>
            </div>
        </div>

        <script>
            // 获取DOM元素
            const tabs = document.querySelectorAll(".tab");
            const tabContents = document.querySelectorAll(".tab-content");
            const addTaskBtn = document.getElementById("add-task-btn");
            const addTaskModal = document.getElementById("add-task-modal");
            const closeBtn = document.querySelector(".close");
            const taskItems = document.querySelectorAll(".task-item");
            const backBtns = document.querySelectorAll(".back-btn");
            const viewTasksBtn = document.getElementById("view-tasks");
            const timeFilterBtns = document.querySelectorAll(".time-btn");

            // 标签切换功能
            tabs.forEach((tab) => {
                tab.addEventListener("click", () => {
                    const tabId = tab.getAttribute("data-tab");

                    // 移除所有活动标签
                    tabs.forEach((t) => t.classList.remove("active"));
                    tabContents.forEach((content) =>
                        content.classList.remove("active")
                    );

                    // 设置当前活动标签
                    tab.classList.add("active");
                    document.getElementById(tabId).classList.add("active");
                });
            });

            // 添加任务按钮点击事件
            addTaskBtn.addEventListener("click", () => {
                addTaskModal.style.display = "block";
            });

            // 关闭模态框
            closeBtn.addEventListener("click", () => {
                addTaskModal.style.display = "none";
            });

            // 点击模态框外部关闭
            window.addEventListener("click", (event) => {
                if (event.target === addTaskModal) {
                    addTaskModal.style.display = "none";
                }
            });

            // 任务项点击事件
            taskItems.forEach((item) => {
                item.addEventListener("click", () => {
                    // 隐藏今日任务标签内容
                    document.getElementById("today").classList.remove("active");
                    // 显示任务详情标签内容
                    document
                        .getElementById("task-detail")
                        .classList.add("active");
                });
            });

            // 返回按钮点击事件
            // 返回按钮点击事件
            backBtns.forEach((btn) => {
                btn.addEventListener("click", () => {
                    // 获取当前活动的内容
                    const activeContent = document.querySelector(
                        ".tab-content.active"
                    );

                    if (activeContent.id === "task-detail") {
                        // 返回到今日任务
                        activeContent.classList.remove("active");
                        document
                            .getElementById("today")
                            .classList.add("active");
                    } else if (activeContent.id === "task-list") {
                        // 返回到个人信息
                        activeContent.classList.remove("active");
                        document
                            .getElementById("profile")
                            .classList.add("active");
                    }
                });
            });

            // 查看任务列表按钮点击事件
            viewTasksBtn.addEventListener("click", (e) => {
                e.preventDefault();
                document.getElementById("profile").classList.remove("active");
                document.getElementById("task-list").classList.add("active");
            });

            // 时间筛选按钮点击事件
            timeFilterBtns.forEach((btn) => {
                btn.addEventListener("click", () => {
                    timeFilterBtns.forEach((b) => b.classList.remove("active"));
                    btn.classList.add("active");

                    // 这里可以添加更新图表的逻辑
                    const timeRange = btn.getAttribute("data-time");
                    updateCharts(timeRange);
                });
            });

            // 更新图表的函数
            function updateCharts(timeRange) {
                console.log("Updating charts for time range:", timeRange);
                // 这里应该根据时间范围获取新数据并更新图表
                // 在实际应用中可能需要调用API获取数据
            }

            // 添加任务表单提交事件
            document
                .getElementById("add-task-form")
                .addEventListener("submit", (e) => {
                    e.preventDefault();

                    // 获取表单数据
                    const taskName = document.getElementById("task-name").value;
                    const taskDesc = document.getElementById("task-desc").value;
                    const taskStartTime =
                        document.getElementById("task-start-time").value;
                    const taskEndTime =
                        document.getElementById("task-end-time").value;

                    // 在实际应用中，这里应该调用API保存任务数据
                    console.log("New task:", {
                        name: taskName,
                        description: taskDesc,
                        startTime: taskStartTime,
                        endTime: taskEndTime,
                    });

                    // 关闭模态框
                    addTaskModal.style.display = "none";

                    // 重置表单
                    e.target.reset();

                    // 添加成功提示或刷新任务列表
                    alert("任务添加成功！");
                });
        </script>
    </body>
</html>
